<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="client/js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.DataMagic-default{
				/*禁止用户选择文字*/
				-moz-user-select: -moz-none;
				-khtml-user-select: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
			.DataMagic-default .toolbar button{
				width: 100px;
				height: 25px;
				background-color: lightsteelblue;
			}
			.DataMagic-default table{
				border-width: 1px;
				border-style: dashed;
				border-color: lightblue;
				width: 100%;
			}
			.DataMagic-default tr:first-of-type{
				background-color: lightsalmon !important;
			}
			.DataMagic-default tr:nth-child(2n+3){
				background-color: rgb(230,230,230);
			}
			.DataMagic-default tr:hover{
				background-color: lightgray;
			}
			.DataMagic-default tr.selected{
				background-color: dodgerblue;
			}
		</style>
		<script type="text/javascript">
			$(function(){
				$(".DataMagic-default tr").click(function(){
					$(this).toggleClass("selected");
				});
			});
		</script>
	</head>
	<body>
		<div class="DataMagic-default">
			<div class="toolbar">
				<button>新建</button>
				<button>删除</button>
				<button>修改</button>
				<button>查找</button>
			</div>
			<table>
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
				<tr>
					<td>张三</td>
					<td>男</td>
					<td>53</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>男</td>
					<td>23</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>男</td>
					<td>65</td>
				</tr>
				<tr>
					<td>赵六</td>
					<td>男</td>
					<td>37</td>
				</tr>
			</table>
		</div>
	</body>
</html>
